<template>
  <div v-if="anchors_list.length === 0">
    <el-empty description="暂无主播" />
  </div>
  <ul v-else class="w-full h-full flex flex-wrap">
    <li
      v-for="anchors in anchors_list"
      :key="anchors.userId"
      class="relative flex-1"
    >
      <div class="w-full h-full" :id="anchors.userId"></div>
      <!-- 无视频 -->
      <div :class="['absolute inset-0 flex justify-center items-center bg-white', anchors.hasVideo ? '-z-10' : 'z-50']">
        无视频
      </div>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import { HostListOption } from "./liveType";
import AnyRTCLive, { AnyRTCLiveEvents } from "../../anyrtcLive";

// 主播列表
const anchors_list = ref<HostListOption[]>([]);

// RTC 成员加入房间
const UserEnterRoom: AnyRTCLiveEvents["UserEnterRoom"] = (user) => {
  console.log("RTC 成员加入房间", user);
};
// RTC 成员离开房间
const UserLeaveRoom: AnyRTCLiveEvents["UserLeaveRoom"] = (user) => {
  console.log("RTC 成员离开房间", user);
};
// RTC 成员发布音视频
const UserAVEnabled: AnyRTCLiveEvents["UserAVEnabled"] = (user, mediaType) => {
  console.log("RTC 成员发布音视频", user, mediaType);
  const peerId = user.uid;
  // 当前人员是否在列表中
  const isExist = anchors_list.value.some((item) => item.userId === peerId);
  console.log("🚀 ~ file: LiveVideo.vue:43 ~ isExist:", isExist);
  if (isExist) {
    anchors_list.value.forEach((item) => {
      if (item.userId === peerId) {
        if (mediaType === "video") {
          item.hasVideo = true;
          user.videoTrack?.play(peerId);
        } else {
          item.hasAudio = true;
        }
      }
    });
  } else {
    if (mediaType === "video") {
      anchors_list.value.push({
        userId: peerId,
        hasAudio: false,
        hasVideo: true,
      });
      nextTick(() => {
        user.videoTrack?.play(peerId);
      });
    } else {
      anchors_list.value.push({
        userId: peerId,
        hasAudio: true,
        hasVideo: false,
      });
    }
  }
};
// RTC 成员停止音视频
const UserAVDisabled: AnyRTCLiveEvents["UserAVDisabled"] = (
  user,
  mediaType
) => {
  console.log("RTC 成员关闭音视频", user, mediaType);
  const peerId = user.uid;
  anchors_list.value.forEach((item, index) => {
    if (item.userId === peerId) {
      if (mediaType === "video") {
        item.hasVideo = false;
      } else {
        item.hasAudio = false;
      }

      if (!item.hasAudio && !item.hasVideo) {
        anchors_list.value.splice(index, 1);
      }
    }
  });
};
// RTC 连接状态
const RTCConnectionStateChange: AnyRTCLiveEvents["RTCConnectionStateChange"] = (
  curState,
  revState
) => {
  console.log("RTC 连接状态", curState, revState);
};

onMounted(() => {
  /** 相关事件监听 */
  AnyRTCLive.on("UserEnterRoom", UserEnterRoom);
  AnyRTCLive.on("UserLeaveRoom", UserLeaveRoom);
  AnyRTCLive.on("UserAVEnabled", UserAVEnabled);
  AnyRTCLive.on("UserAVDisabled", UserAVDisabled);
  AnyRTCLive.on("RTCConnectionStateChange", RTCConnectionStateChange);
});
onUnmounted(() => {
  AnyRTCLive.off("UserEnterRoom", UserEnterRoom);
  AnyRTCLive.off("UserLeaveRoom", UserLeaveRoom);
  AnyRTCLive.off("UserAVEnabled", UserAVEnabled);
  AnyRTCLive.off("UserAVDisabled", UserAVDisabled);
  AnyRTCLive.off("RTCConnectionStateChange", RTCConnectionStateChange);
});

// 添加主播列表(本地角色：主播时调用)
const addAnchorsList = (options: HostListOption) => {
  anchors_list.value.push(options);
};
// 主播音视频设置(本地角色：主播时调用)
const setAnchorAV = (
  userId: string,
  type: "audio" | "video",
  state: boolean
) => {
  anchors_list.value.forEach((item) => {
    if (item.userId === userId) {
      if (type === "audio") {
        item.hasAudio = state;
      }
      if (type === "video") {
        item.hasVideo = state;
      }
    }
  });
};
defineExpose({
  addAnchorsList,
  setAnchorAV,
});
</script>
